<style lang="stylus">
b
  position absolute
  z-index 1
  display flex
  flex-direction row
  align-items center
  cursor move

  a
    color #f00
    font-size 23px
    margin-left 9px
    margin-top 2px
    visibility hidden

  &:hover
    a
      visibility visible
      display block

  div
    cursor text
    background transparent
    border 0
    border-bottom 2px solid #f00
    outline none
    font-size 20px
    color #f00
    padding 3px
    font-weight bold

body
  app-region no-drag
  // background rgba(0,0,0,.1)
  overflow hidden
</style>

<style lang="stylus" scoped>
canvas
  flex 1

  &.pen
    cursor url('!/svg/cursor/pen.svg') 16 16, cell

  &.rect
    cursor url('!/svg/cursor/rect.svg') 16 16, cell
</style>

<template lang="pug">
canvas(:class="[shape]" ref="c")
</template>

<script lang="coffee">

import ipc from '~/lib/ipc.coffee'
import ON from '~/lib/broadcast/on.coffee'
import DRAW from '~/store/draw.coffee'
import interact from 'interactjs'

{recbar} = ipc
drawer = {
  txt:(ctx)=>
    {
      mousedown:(e)=>
        doc = document
        c = doc.createElement.bind doc
        div = c 'b'
        set = (x,y)=>
          div.style.left = x+'px'
          div.style.top = y+'px'
          return
        set e.clientX,e.clientY
        data_x = 'x'
        data_y = 'y'
        round = Math.round
        floor = Math.floor
        interact(div).draggable({
          listeners: move: ({target,dx,dy})=>
            left = round dx
            top = round dy
            if left or top
              x = floor(target.getAttribute(data_x)) or 0
              y = floor(target.getAttribute(data_y)) or 0
              # translate when resizing from top or left edges
              x += left
              y += top
              target.style.transform = 'translate(' + x + 'px,' + y + 'px)'
              target.setAttribute data_x, x
              target.setAttribute data_y, y
          inertia:true
        })

        input = c 'div'
        input.spellcheck = false
        input.contentEditable = 'plaintext-only'
        div.appendChild input
        close = c 'a'
        close.onclick = =>
          div.remove()
        close.innerText = '×'
        div.appendChild close
        {canvas} = ctx
        canvas.after div
        setTimeout(
          =>
            input.focus()
            return
          300
        )
        recbar.top()
        return

    }
  rect:(ctx)=>
    w = h = x = y = 0
    ctx.lineWidth = 2
    ctx.strokeStyle = color = '#f00'
    ing = false
    img = undefined
    {
      mousedown:(e)=>
        ing = true
        x = e.clientX
        y = e.clientY
        return
      mousemove:(e)=>
        if ing
          #if w
          #  ctx.globalCompositeOperation = 'destination-out'
          #  ctx.strokeStyle = "#fff"
          #  ctx.strokeRect(x,y,w,h)
          #  ctx.fillRect(x,y,w,h)
          #  ctx.globalCompositeOperation = 'source-over'
          #  ctx.strokeStyle = color

          {clientX,clientY} = e
          w = clientX-x
          h = clientY-y
          if img
            ctx.putImageData(img,0,0)
          else
            img = ctx.getImageData(0,0,innerWidth,innerHeight)

          ctx.strokeRect(x, y, w, h)
          #ctx.save()
        return
      mouseup:(e)=>
        w = 0
        ing = false
        #ctx.save()
        img = undefined
        return
    }

  pen:(ctx)=>
    ctx.lineWidth = 3
    ctx.lineCap = "round"
    ctx.strokeStyle = '#f00'
    ing = false
    draw = (e)=>
      {clientX,clientY} = e
      ctx.lineTo(clientX,clientY)
      ctx.stroke()
      ctx.beginPath()
      ctx.moveTo(clientX,clientY)
    {
      mousedown:(e)=>
        ing = true
        draw e
        return
      mouseup:(e)=>
        ing = false
        ctx.beginPath()
        return
      mousemove:(e)=>
        if ing
          draw e
        return
    }
}
export default {
setup:=>
  c = shallowRef()
  shape = shallowRef()
  onMounted =>
    elem = c.value
    elem.height = innerHeight
    elem.width = innerWidth
    ctx = elem.getContext('2d')

    print = undefined
    elem.addEventListener 'mouseup',=>
      recbar.top()
      return

    watchEffect =>
      _shape = DRAW.shape
      if _shape == shape.value
        return

      if print
        for [k,v] from Object.entries(print)
          elem.removeEventListener k,v

      shape.value = _shape
      print = drawer[_shape](ctx)
      for [k,v] from Object.entries(print)
        elem.addEventListener k,v
      recbar.draw_top()
    return
  {
    shape
    c
  }
}
</script>
